<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
        <title><?= $title ?></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <link type="text/css" rel="stylesheet" rev="stylesheet" media="screen" href="<?php echo base_url(); ?>tbw-apk/views/css/default.css" />
        <link type="text/css" rel="stylesheet" rev="stylesheet" media="screen" href="<?php echo base_url(); ?>tbw-apk/views/css/jquery-ui.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>tbw-apk/views/js/jquery-ui-1.10.2.custom.js"></script>
        <!--[if IE]>
        <link href="./css/ie.css" />
        <![endif]-->
        <!--[if IE 6]>
        <link href="./css/ie6.css" rel="stylesheet" type="text/css" media="screen" />
        <![endif]-->
    </head>
    <body>
        <div id="header" class="   center siteWidth   ui-widget-content ui-corner-all pushUp" >
            <div class="bkgLighter tCenter">
                <div class=" center siteWidth tLeft clearfix pushUp pushDown">
                    <div class="h1 left w35 tWhite">
                        TBW-APK
                    </div>
                    <div class="right">
                        <?php echo anchor('session/logout', 'Logout'); ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="pushUp ">
            <div class="center  siteWidth ">
                <?= $menu ?>
            </div>
        </div>

        <div id="content" class="pushUp center siteWidth clearfix relative tLeft bkgWhite ui-widget-content ui-corner-all">
            <div class="relative">
                <div class="block">

                    <div class="clearfix pushUp">
                        <?= $content ?>

                    </div>
                </div>

            </div>
        </div>
        <div id="footer" class="bkgBlack height100 center siteWidth tLeft clearfix  pushUp ui-widget-content ui-corner-all">

        </div>
        <!-- Sub menus wherever you want in the page code (cool for SEO) -->
        <div id="subItem2" class="clearfix subMenu bkgMedium hidden">
            <div class="padding">This is the sub menu for menu item2</div>
        </div>
        <div id="subItem3" class="clearfix subMenu bkgMedium hidden">
            <div class="padding">This is the sub menu for menu item3</div>
        </div>
        <div id="subItem4" class="clearfix subMenu bkgMedium hidden">
            <div class="padding">This is the sub menu for menu item4</div>
        </div>
        <!-- /Sub menus -->

        <script type="text/javascript" src="./js/jquery.hoverIntent.minified.js"></script>
        <script type="text/javascript" src="./js/jquery.ba-resize.min.js"></script>

        <script type="text/javascript" src="http://www.jquery-css.com/js/magic.js" ></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //Align the sub meu to their menu items
                $("#subItem2").align({top: {at: 1, selector: '#mainMenu'}, right: "#content", left: "#menuItem2"});
                $("#subItem3").align({top: {at: 1, selector: '#mainMenu'}, right: "#content", left: "#menuItem3"});
                $("#subItem4").align({top: {at: 1, selector: '#mainMenu'}, right: "#content", left: "#menuItem4"});

                //Associate menu item and submenus
                $("#menuItem2").setSubMenu('subItem2');
                $("#menuItem3").setSubMenu('subItem3');
                $("#menuItem4").setSubMenu('subItem4');

                //Build the carrousel	
                var itemsCount = $("#items li").length;
                for (var i = 1; i <= itemsCount; i++) {
                    $('#item' + i).setSubMenu({
                        id: 'content' + i,
                        action: 'click',
                        hover: 'bkgDark curved',
                        out: 'tLight',
                        openFunction: function(me) {
                            if (me.hasClass("hidden")) {
                                me.removeClass("hidden");
                                me.css({'height': me.height(), maxHeight: me.height(), width: '0%'});
                            }
                            $('#carrouselContent').append(me);
                            me.animate({width: "100%"}, {queue: false, duration: 400});
                        },
                        closeFunction: function(me) {
                            setTimeout(function() {
                                me.animate({width: "0%"}, {queue: false, duration: 400}).addClass("hidden");
                            }, 500);
                        },
                    });
                }
                //start the carrousel
                $("#items").playMenu(6000);

                //carrousel : on hover stops it, on out resume it
                $("#carrousel").hoverIntent({
                    over: function() {
                        $("#items").pauseMenu();
                    },
                    out: function() {
                        $("#items").playMenu();
                    }
                });
            });
        </script>
    </body>
</html>
